<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/common.jsp" %>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>个人资料更新界面</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="<%=path%>/plugins/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="<%=path%>/plugins/layui/css/user.css"/>
	<script src="<%=path%>/plugins/layui/layui.js"></script>
	<script type="text/javascript" src="<%=path%>/json/address.js"></script>

</head>
<body class="childrenBody">
	<form class="layui-form" id="infomation" lay-filter="userInfo">
		<input type="hidden" name="userId" value="${user.userId}">
		<div class="user_left">
			<div class="layui-form-item">
			    <label class="layui-form-label">用户名</label>
			    <div class="layui-input-block">
			    	<input type="text" name="userName" value="请叫我傻哥" disabled class="layui-input layui-disabled">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">用户组</label>
			    <div class="layui-input-block">
			    	<input type="text" value="超级管理员" disabled class="layui-input layui-disabled">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">真实姓名</label>
			    <div class="layui-input-block">
			    	<input type="text" name="userRealName" value="" placeholder="请输入真实姓名" lay-verify="required" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">年龄</label>
			    <div class="layui-input-block">
			    	<input type="text" name="userAge" value="" placeholder="请输入真实年龄" lay-verify="required|number" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item" pane="">
			    <label class="layui-form-label">性别</label>
			    <div class="layui-input-block">
			    	<input type="radio" name="userSex" value="男" title="男" checked="">
	     			<input type="radio" name="userSex" value="女" title="女">
	     			<input type="radio" name="userSex" value="保密" title="保密" class="layui-disabled">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">手机号码</label>
			    <div class="layui-input-block">
			    	<input type="tel" name="userTelephone" value="" placeholder="请输入手机号码" lay-verify="required|phone" class="layui-input">
			    </div>
			</div>
            <div class="layui-form-item">
                <label class="layui-form-label">户籍所在地</label>
                <div class="layui-input-inline">
                    <select name="provid" id="provid" lay-filter="provid" >
                        <option value="">请选择省</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="cityid" id="cityid" lay-filter="cityid">
                        <option value="">请选择市</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="areaid" id="areaid" lay-filter="areaid">
                        <option value="">请选择县/区</option>
                    </select>
                </div>
            </div>
			<div class="layui-form-item">
			    <label class="layui-form-label">详细住址</label>
			    <div class="layui-input-block">
			    	<input type="tel" name="userAddress" value="" placeholder="请输入住址" lay-verify="required" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">兴趣爱好</label>
			    <div class="layui-input-block">
			    	<input type="checkbox" name="like1[javascript]" title="Javascript">
				    <input type="checkbox" name="like1[html]" title="HTML(5)">
				    <input type="checkbox" name="like1[css]" title="CSS(3)">
				    <input type="checkbox" name="like1[php]" title="PHP">
				    <input type="checkbox" name="like1[.net]" title=".net">
				    <input type="checkbox" name="like1[ASP]" title="ASP">
				    <input type="checkbox" name="like1[C#]" title="C#">
				    <input type="checkbox" name="like1[Angular]" title="Angular">
				    <input type="checkbox" name="like1[VUE]" title="VUE">
				    <input type="checkbox" name="like1[XML]" title="XML">
			    </div>
			</div>
		  <div class="layui-form-item">
		    <label class="layui-form-label">教育程度</label>
		    <div class="layui-input-block">
		      <select name="userEducation" lay-filter="education" lay-verify="required">
		        <option value=""></option>
		        <option value="小学">小学</option>
		        <option value="初中" >初中</option>
		        <option value="高中" >高中</option>
		        <option value="大学" >大学</option>
		        <option value="硕士" >大学</option>
		        <option value="博士" >大学</option>
		      </select>
		    </div>
		  </div>
			<div class="layui-form-item">
			    <label class="layui-form-label">QQ</label>
			    <div class="layui-input-block">
			    	<input type="text" value="" name="userQq" placeholder="请输入QQ号" lay-verify="required|wx" class="layui-input">
			    </div>
			</div>

			<div class="layui-form-item">
			    <label class="layui-form-label">微信</label>
			    <div class="layui-input-block">
			    	<input type="text" value="" name="userWx" placeholder="请输入QQ" lay-verify="required|qq" class="layui-input">
			    </div>
			</div>
		</div>
		<div class="user_right">
			<button type="button" class="layui-btn" id="userFace">
				<i class="layui-icon">&#xe67c;</i>上传头像
			</button>
			<img src="" class="layui-circle" id="userFaces" height="70%" width="70%">
		</div>
		<div class="layui-form-item" style="margin-left: 5%;">
		    <div class="layui-input-block">
		    	<button class="layui-btn" id="changeUser" lay-submit="" lay-filter="changeUser">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		    </div>
		</div>
	</form>
</body>

<script>

layui.use(['form','layer','upload','laydate','jquery'],function(){
	//var form = layui.form;
	//var $ = layui.jquery;
	var laydate = layui.laydate;
	var upload = layui.upload;
	var img = '${user.userImg}';
	var layer = parent.layer === undefined ? layui.layer : parent.layer;
	
	$ = layui.jquery;
    form = layui.form;
    $form = $('form');
    treeSelect(defaults);
	
	  //普通图片上传
	  var uploadInst = upload.render({
	    elem: '#userFace'
	    ,url: '<%=path%>/biz/SysUser_uploadUserFace.action'
	    ,data: {"userId": '${user.userId}'}
	    ,accept: "images" //限制文件类型
	    ,size: 10000 //限制文件大小
	    ,auto: true //自动上传
	    ,before: function(obj){
	      //预读本地文件示例
	      obj.preview(function(index, file, result){
	        $('#userFaces').attr('src', result); //图片链接（base64）
	      });
	    }
	    ,done: function(res){
	      console.log(res);
	      console.log(res.data);
	      //如果上传失败
	      if(res.code > 0){
	        return layer.msg('上传失败');
	      }
	      return layer.alert('上传成功');
	      //上传成功
	    }
	    ,error: function(){
	      //演示失败状态，并实现重传
	      var demoText = $('#demoText');
	      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
	      demoText.find('.demo-reload').on('click', function(){
	        uploadInst.upload();
	      });
	    }
	  });
	  
	  laydate.render({
	  	elem: '#time',
	  	done: function(value){
	  	
	  	}
	  });

        //添加验证规则
        form.verify({

        });

        //判断是否修改过头像，如果修改过则显示修改后的头像，否则显示默认头像
        
        if(img == null || img === ""){
        	$("#userFaces").attr("src","<%=path%>/images/userface1.jpg");
        }else{
        	console.log(img);
        	$("#userFaces").attr("src","<%=path%>/biz/SysUser_userFecePreview.action?fileFileName="+img);
        }

        //提交个人资料
        form.on("submit(changeUser)",function(data){
        	var index = layer.msg('提交中，请稍候',{icon: 16,time:false,shade:0.8});
        	$.ajax({
        		url: "<%=path%>/biz/SysUser_editInfomation.action"
       			,data: $("#infomation").serialize()
       			,type: "POST"
       			,dataType: "json"
       			,success: function(data){
       				var json = eval("("+data+")");
       				if(json.isSucceed){
       					setTimeout(function(){	
					      layer.open({
					      	content: "修改成功"
					        ,btn: '朕知道啦'
					        ,btnAlign: 'c' //按钮居中
					        ,shade: 0 //不显示遮罩
					        ,yes: function(){
					          layer.closeAll();
					          location.href = '<%=path%>/main.html'
					        }
					      }); 
	            	 },2000);
       				} else{
       				    setTimeout(function(){
	                	layer.close(index);
	                	layer.msg("修改失败！");
	            	 },2000);
       				}
       			}
       			,error: function(data){
       			 setTimeout(function(){
                	layer.close(index);
                	layer.msg("提交失败！");
            	 },2000);
       			}
        	});
        	return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        
      //信息提示弹出层
	  function message(data){
	      layer.open({
	        content: '<div style="padding: 20px 100px;">'+ data +'</div>'
	        ,btn: '朕知道啦'
	        ,btnAlign: 'c' //按钮居中
	        ,shade: 0 //不显示遮罩
	        ,yes: function(){
	          layer.closeAll();
	        }
	      }); 
	  };
	  
	  form.val("userInfo",{
	  		"userName": '${user.userName}'
	  		,"userRealName": '${user.userRealName}'
	  		,"userSex": '${user.userSex}'
	  		,"userEducation": '${user.userEducation}'
	  		,"userQq": '${user.userQq}'
	  		,"userWx": '${user.userWx}'
	  		,"userAge": '${user.userAge}'
	  		,"userTelephone": '${user.userTelephone}'
	  		,"userAddress": '${user.userAddress}'
	  });
});
var defaults = {
  s1:'provid',
  s2:'cityid',
  s3:'areaid',
  v1:null,
  v2:null,
  v3:null
}; 
var $form;
var form;
var $;

function treeSelect(config)
{
    config.v1 =config.v1?config.v1:"北京";
    config.v2 =config.v2?config.v2:"北京";
    config.v3 =config.v3?config.v3:"东城区";
    $.each(threeSelectData,function(k,v){
        appendOptionTo($form.find('select[name='+config.s1+']'),k,k,config.v1);
    });
    form.render();
    cityEvent(config);
    areaEvent(config);
    form.on('select('+config.s1+')', function(data) {
        cityEvent(data);
        form.on('select('+config.s2+')', function(data) {
           areaEvent(data);
        });
    });

    function cityEvent(data){
        $form.find('select[name='+config.s2+']').html("");
        config.v1 = data.value?data.value:config.v1;
        $.each(threeSelectData,function(k,v){
            if(k==config.v1)
            {
              if(v.items){
                $.each(v.items,function(kt,vt){
                   appendOptionTo($form.find('select[name='+config.s2+']'),kt,kt,config.v2);
                });
              }
            }
        });
        form.render();
        config.v2 = $('select[name='+config.s2+']').val();
        areaEvent(config);
    }
    function areaEvent(data){
        $form.find('select[name='+config.s3+']').html("");
        config.v2 = data.value?data.value:config.v2;
        $.each(threeSelectData,function(k,v){
            if(k==config.v1)
            {
              if(v.items){
                $.each(v.items,function(kt,vt){
                   if(kt==config.v2)
                   {
                      $.each(vt.items,function(ka,va){
                          appendOptionTo($form.find('select[name='+config.s3+']'),ka,ka,config.v3);
                      });
                   }
                });
              }
            }
        });
        form.render();
        form.on('select('+config.s3+')', function(data) {});
    }
    function appendOptionTo($o,k,v,d){
      var $opt=$("<option>").text(k).val(v);
      if(v==d){$opt.attr("selected", "selected")}
      $opt.appendTo($o);
    }
}
</script>
</html>